import { WindowComp } from '@/components'
import { WidgetSizeType } from '@/Widgets/Widget/types'
import { FC, ReactNode, useEffect } from 'react'
import Content from './Content'
import styles from './styles.module.less'
import { WeatherPropsType } from './types'
import { sizeTypes } from './cons'
import { getClassNames } from 'magic-ui-react'
import moment from 'moment'

const Weather: FC<WeatherPropsType> = (props) => {
  const {
    sizeType,
    isClick = true
  } = props

  const night = Number(moment().format('HH'))

  const icon = (
    <>
      <main
        className={getClassNames([
          styles.Weather,
          {
            [styles.WeatherDayBg]: night < 18,
            [styles.WeatherNightBg]: night >= 18
          }
        ])}
        onClick={(e) => {
          if (!isClick) {
            e.stopPropagation()
          }
        }}
      >
        {sizeTypes[sizeType]}
      </main>
    </>

  )

  return (
    <WindowComp
      title="和风天气"
      icon={() => icon}
      content={<Content />}
      background={(
        <div
          className={getClassNames([
            {
              [styles.WeatherDayBg]: night < 18,
              [styles.WeatherNightBg]: night >= 18
            }
          ])}
        ></div>
      )}
      footer={(
        <div className='flex justify-center h-10 items-center text-sm'>
          天气数据由
          <a
            className='text-yellow-800'
            onClick={() => {
              window.open('https://www.qweather.com')
            }}
            href="https://www.qweather.com"
          >和风天气</a>
          提供
        </div>
      )}
    />
  )
}
export default Weather